<template>
  <div id="particles">
    <el-button class="btn" type="primary">立即预定</el-button>
    <div class="logon"><img src="./assets/logo.png"></div>
    <div class="meet_content">
      <div class="status">进行中</div>
      <div class="title">函数和积分</div>
      <div class="meet_time">下午2：00 → 3：00</div>
      <div class="teacher">黄敏 <span class="label">老师</span></div>
      <div class="function">
        <div class="qr">
          <div>
            <div id="qrCode" ref="qrCodeDiv" style="padding: 5px;margin:10px;background-color: white"></div>
            <div style="margin-top: 10px">扫码预定</div>
          </div>
        </div>
        <div class="card">
          <div>
            <div><img src="./assets/icon_door.png"></div>
            <div style="margin-top: 20px">门禁控制</div>
          </div>
        </div>
      </div>
    </div>
    <div class="time_area">
      <div class="time">{{ currentTime }}</div>
      <div class="date">{{ currentData }}</div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

export default {
  name: 'App',
  computed: {
    pin() {
      return '5h1g5x2qa'
    },
    company() {
      return 'shgbit'
    },
  },
  mounted() {
    // eslint-disable-next-line no-undef
    particlesJS.load('particles', 'particales.json');
    this.bindQRCode()
    this.nowTimes()
    this.$axios.get('/api/external/company', {
      headers: {'pin': this.pin, 'company': this.company},

    }).then(function (res) {
      console.log(res)
    });
  },
  destroyed() {
    this.clear()
  },
  data() {
    return {
      currentData: '',
      currentTime: '',
    }
  },
  methods: {
    bindQRCode: function () {
      new QRCode(this.$refs.qrCodeDiv, {
        text: 'https://www.baidu.com',
        width: 110,
        height: 110,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
      let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
      let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
      let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
      let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
      this.currentData = year + "年" + month + "月" + date + "日";
      this.currentTime = hh + ":" + mm + ':' + ss;
    },
    nowTimes() {
      this.timeFormate(new Date());
      setInterval(this.nowTimes, 1000);
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null;
    }
  }
}
</script>

<style>
body, html {
  position: fixed;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  /*font-size:62.5%;*/
}

#particles {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px 40px;
  background-color: #022353;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  color: white;
}

.meet_content {
  position: absolute;
  top: 20%;
}

.status {
  font-family: PingFangSC-Semibold;
  font-size: 32px;
  color: #FFFFFF;
  letter-spacing: 0.41px;
  line-height: 39px;
}

.title {
  margin-top: 23px;
  font-family: PingFangSC-Semibold;
  font-size: 64px;
  color: #FFFFFF;
  letter-spacing: 0.82px;
}

.teacher {
  margin-top: 20px;
  font-family: PingFangSC-Medium;
  font-size: 40px;
  color: #FFFFFF;
  letter-spacing: 0.51px;
}

.function {
  margin-top: 45px;
  display: flex;
}

.qr {
  border: 2px dashed #C5C4C4;
  border-radius: 8px;
  width: 278px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.card {
  margin-left: 24px;
  border: 2px dashed #C5C4C4;
  border-radius: 8px;
  width: 278px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.meet_time {
  margin-top: 8px;
  font-family: PingFangSC-Regular;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 2.4px;
}

.label {
  font-family: PingFangSC-Regular;
  font-size: 32px;
  color: #FFFFFF;
  letter-spacing: 0.41px;
}

.btn {
  position: absolute;
  right: 120px;
  top: 30px;
  width: 120px;
  height: 50px;
}

.time_area {
  position: absolute;
  right: 0px;
  bottom: 0px;
  margin-bottom: 35px;
  margin-right: 120px;
  width: 200px;
  height: 100px;
}

.time {
  font-family: PingFangSC-Medium;
  font-size: 23px;
  color: #FFFFFF;
  letter-spacing: 1.38px;
  text-align: right;
}

.date {
  font-family: PingFangSC-Regular;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 1.2px;
  text-align: right;
}
</style>
